<template>
  <div class="users" v-if="cardShow == '1'">
    <div class="acea-row">
      <div class="leftDecBox">
        <div class="service_header">
          <img v-if="diy_data.top_bg_img.length" :src="diy_data.top_bg_img[0].pic" alt />
        </div>

        <div
          class="service-box dotted"
          @click="changeServiceIndex(0)"
          :class="serviceIndex===0?'solid':''"
        >
          <img class="service-box-logo" :src="diy_data.logo" alt />
          <div class="service-box-input">
            <div class="_flex-row-mid">
              <div>地点</div>
              <i class="el-icon-arrow-down" style="color: rgb(153, 153, 153);"></i>
            </div>
            <div class="service-input">
              <i class="el-icon-search" style="margin-right: 5px;"></i>
              <div style="color:rgb(153, 153, 153);">搜索商品、服务</div>
            </div>
          </div>
        </div>

        <div style="padding: 0 18px;">
          <div
            class="navBox dotted"
            @click="changeServiceIndex(1)"
            :class="serviceIndex===1?'solid':''"
          >
            <div class="item" v-for="(item,index) in diy_data.service_menus" :key="index">
              <img :src="item.pic" alt />
              <div class="_line-1" style="width:100%;">{{item.name||'标题'}}</div>
            </div>
          </div>

          <div
            class="centerNavBox dotted"
            @click="changeServiceIndex(2)"
            :class="serviceIndex===2?'solid':''"
          >
            <div class="title">中部栏目</div>
            <div class="list">
              <img
                v-for="(item,index) in diy_data.service_center_banner"
                :key="index"
                :src="item.pic"
                alt
              />
            </div>
          </div>
        </div>

        <div
          class="swiper-service-box dotted"
          @click="changeServiceIndex(3)"
          :class="serviceIndex===3?'solid':''"
        >
          <div>{{diy_data.service_banner_title||'标题'}}</div>

          <div class="swiper-box">
            <img
              v-for="(item,index) in diy_data.service_banner_list"
              :key="index"
              :src="item.pic"
              alt
            />
          </div>
        </div>

        <div
          class="swiper-service-box dotted"
          @click="changeServiceIndex(4)"
          :class="serviceIndex===4?'solid':''"
        >
          <div>首页列表</div>

          <div class="home-list-box">
            <div class="item" v-for="(item,index) in diy_data.service_recommond" :key="index">
              <div>{{item.name||'标题'}}</div>
              <div class="sub" style="background-color: rgb(142, 188, 251);">{{item.subname||'副标题'}}</div>
            </div>
          </div>
        </div>

        <div class="bottomContent">
          <div
            class="list dotted"
            @click="changeServiceIndex(5)"
            :class="serviceIndex===5?'solid':''"
          >
            <div class="item" v-for="(item,index) in diy_data.service_bottom_icon" :key="index">
              <img :src="item.pic" alt />
              <div class="sub">{{item.subname||'副标题'}}</div>
              <div class="title">{{item.name||'标题'}}</div>
            </div>
          </div>
        </div>

        <div
          class="bottomNavBox dotted"
          :style="'background-color:'+diy_data.service_tabbar.bgColor.color+'; color:'+diy_data.service_tabbar.txtColor.color+';'"
          @click="changeServiceIndex(6)"
          :class="serviceIndex===6?'solid':''"
        >
          <div class="item" v-for="(item, index) in diy_data.service_tabbar.menuList" :key="index">
            <img
              :src="index==0?item.pic[0]:item.pic[1]"
              v-if="item.pic[0] && item.pic[0] != ''"
              alt
            />
            <div
              :style="index==0?'color:'+diy_data.service_tabbar.activeTxtColor.color:''"
            >{{ item.name||"导航名称" }}</div>
          </div>
        </div>
      </div>

      <div class="rightDecBox">
        <div class="titleDecBox">页面设置</div>

        <div v-if="serviceIndex === 0">
          <el-row>
            <el-col :span="4">主题颜色[深]</el-col>
            <el-col :span="20">
              <el-color-picker v-model="diy_data.fontBackColor1.color"></el-color-picker>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">主题颜色[浅]</el-col>
            <el-col :span="20">
              <el-color-picker v-model="diy_data.fontBackColor2.color"></el-color-picker>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">主题颜色[中]</el-col>
            <el-col :span="20">
              <el-color-picker v-model="diy_data.fontBackColor3.color"></el-color-picker>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">页面标题：</el-col>
            <el-col :span="20">
              <el-input v-model="diy_data.title" placeholder="请输入页面标题"></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">顶部LOGO</el-col>
            <el-col :span="20">
              <div class="upLoadPicBox" @click="modalPicTap(false,'logo')">
                <div v-if="diy_data.logo" class="pictrue">
                  <img :src="diy_data.logo" />
                </div>
                <div v-else class="upLoad">
                  <i class="el-icon-camera cameraIconfont" />
                </div>
                <div class="from-tips">建议尺寸(25*25)</div>
              </div>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="4">其他页面顶部背景图</el-col>
            <el-col :span="20">
              <div class="upLoadPicBox" @click="modalPicTap(false,'other_top_bg_img')">
                <div v-if="diy_data.other_top_bg_img" class="pictrue">
                  <img :src="diy_data.other_top_bg_img" />
                </div>
                <div v-else class="upLoad">
                  <i class="el-icon-camera cameraIconfont" />
                </div>
                <div class="from-tips">建议尺寸：375 * 270px</div>
              </div>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="4">客服头像</el-col>
            <el-col :span="20">
              <div class="upLoadPicBox" @click="modalPicTap(false,'service_customer_img')">
                <div v-if="diy_data.service_customer_img" class="pictrue">
                  <img :src="diy_data.service_customer_img" />
                </div>
                <div v-else class="upLoad">
                  <i class="el-icon-camera cameraIconfont" />
                </div>
                <div class="from-tips">建议尺寸(60*60)</div>
              </div>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="4">背景图</el-col>
            <el-col :span="20">
              <div style="color:#999;">建议尺寸：375 * 270px</div>
              <UploadList :configObj="diy_data.top_bg_img" name="top_bg_img"></UploadList>
            </el-col>
          </el-row>
        </div>

        <div v-if="serviceIndex === 1">
          <el-row>
            <el-col :span="4">导航：</el-col>
            <el-col :span="20">
              <div style="color:#999;">建议尺寸：86 * 86px，拖拽图片可调整图片显示顺序哦</div>
              <UploadList :configObj="diy_data.service_menus" name="service_menus"></UploadList>
            </el-col>
          </el-row>
        </div>

        <div v-if="serviceIndex === 2">
          <el-row>
            <el-col :span="4">导航：</el-col>
            <el-col :span="20">
              <div style="color:#999;">
                请上传四个链接地址，为最佳。
                推荐尺寸：左1 334*405；右1 334*191；右2 334*191；底部 750*220
              </div>
              <UploadList
                :isShowAddBtn="false"
                :isEditBtn="false"
                :configObj="diy_data.service_center_banner"
                name="service_center_banner"
              ></UploadList>
            </el-col>
          </el-row>
        </div>

        <div v-if="serviceIndex === 3">
          <el-row>
            <el-col :span="4">轮播标题：</el-col>
            <el-col :span="20">
              <el-input v-model="diy_data.service_banner_title" placeholder="请输入轮播标题"></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">轮播：</el-col>
            <el-col :span="20">
              <div style="color:#999;">建议尺寸：20 * 20 px，拖拽图片可调整图片显示顺序哦</div>
              <UploadList :configObj="diy_data.service_banner_list" name="service_banner_list"></UploadList>
            </el-col>
          </el-row>
        </div>

        <div v-if="serviceIndex === 4">
          <el-row>
            <el-col :span="4">首页列表：</el-col>
            <el-col :span="20">
              <div style="color:#999;">建议尺寸：20 * 20 px，拖拽图片可调整图片显示顺序哦</div>
              <UploadList
                name="service_recommond"
                :cateList="cateList"
                :configObj="diy_data.service_recommond"
              ></UploadList>
            </el-col>
          </el-row>
        </div>

        <div v-if="serviceIndex === 5">
          <el-row>
            <el-col :span="4">列表：</el-col>
            <el-col :span="20">
              <div style="color:#999;">建议尺寸：86 * 86px，拖拽图片可调整图片显示顺序哦</div>
              <UploadList
                :modelMaxLength="4"
                name="service_bottom_icon"
                :configObj="diy_data.service_bottom_icon"
              ></UploadList>
            </el-col>
          </el-row>
        </div>

        <div v-if="serviceIndex === 6">
          <el-row>
            <el-col :span="4">文字颜色</el-col>
            <el-col :span="20">
              <el-color-picker v-model="diy_data.service_tabbar.activeTxtColor.color"></el-color-picker>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">选中文字颜色</el-col>
            <el-col :span="20">
              <el-color-picker v-model="diy_data.service_tabbar.activeTxtColor.color"></el-color-picker>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">背景颜色</el-col>
            <el-col :span="20">
              <el-color-picker v-model="diy_data.service_tabbar.bgColor.color"></el-color-picker>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">底部导航栏：</el-col>
            <el-col :span="20">
              <div style="color:#999;">建议尺寸：86 * 86px，拖拽图片可调整图片显示顺序哦</div>
              <UploadList
                name="service_tabbar"
                :modelMaxLength="5"
                :cateList="cateList"
                :configObj="diy_data.service_tabbar.menuList"
              ></UploadList>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import UploadList from '@/views/pagediy/onsite/components/uploadList';
import { getCodeCateCascApi, getOnsiteHomeDiyApi,saveOnsiteDiyData } from '@/api/onsite';
export default {
  components: { UploadList },
  name: 'services',
  props: {
    cardShow: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      serviceIndex: 0,

      diy_data: {
        fontBackColor1: {
          //主题颜色[深]
          color: '#000',
        },
        fontBackColor2: {
          //主题颜色[浅]
          color: '#000',
        },
        fontBackColor3: {
          //主题颜色[中]
          color: '#000',
        },
        title: '', //页面标题：
        logo: '', //logo
        other_top_bg_img: '', //其他顶部图片
        service_customer_img: '', //客服头像
        top_bg_img: [], //顶部背景图
        service_menus: [], //首页导航
        service_center_banner: [
          {
            name: '',
            url: '',
            pic: '',
            subname: '',
            is_hot: 0,
            cate_value: [],
          },
          {
            name: '',
            url: '',
            pic: '',
            subname: '',
            is_hot: 0,
            cate_value: [],
          },
          {
            name: '',
            url: '',
            pic: '',
            subname: '',
            is_hot: 0,
            cate_value: [],
          },
          {
            name: '',
            url: '',
            pic: '',
            subname: '',
            is_hot: 0,
            cate_value: [],
          },
        ], //中部栏目
        service_banner_title: '', //轮播标题
        service_banner_list: [], //轮播
        service_recommond: [], //首页列表
        service_bottom_icon: [], //底部列表

        service_tabbar: {
          //底部导航栏
          menuList: [], //导航列表
          activeTxtColor: {
            title: '选中文字颜色',
            color: '#000',
          }, //选中文字颜色
          txtColor: {
            title: '文字颜色',
            color: '#999',
          }, //文字颜色
          bgColor: {
            title: '背景颜色',
            color: '#fff',
          }, //背景颜色
        },
      },

      cateList: [],
    };
  },
  created() {
    this.getCateList();
  },
  mounted() {
    this.getDiyData();
  },

  methods: {
    //获取数据
    getDiyData() {
      getOnsiteHomeDiyApi('onsite').then((res) => {
        console.log(res)
        this.diy_data = res;
      });
    },
    changeServiceIndex(type) {
      this.serviceIndex = type;
    },

    // 点击商品图
    modalPicTap(multiple, field) {
      const _this = this;
      const attr = [];
      this.$modalUpload(
        function (img) {
          if (!img) return;
          _this.diy_data[field] = img[0].sattDir;
        },
        multiple,
        'store',
      );
    },

    getCateList() {
      getCodeCateCascApi().then((res) => {
        this.cateList = res;
        console.log(this.cateList, 'cateList');
      });
      // this.cateList = [
      //   {
      //     value: 1,
      //     label: '指南',
      //     children: [{
      //       value: 1,
      //       label: '指南1',
      //     }],
      //   }
      // ];
    },

    onSubmit() {
      console.log(this.diy_data, 'diy_data');
      saveOnsiteDiyData(this.diy_data).then(() => {
        this.$message.success('操作成功')
      })
    },
  },
};
</script>

<style scoped>
._flex-row-mid {
  display: flex;
  align-items: center;
}

.acea-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.leftDecBox {
  width: 310px;
  position: relative;
  background: #f7f7f7;
  border-right: 1px solid #eee;
  margin-right: 30px;
  border-radius: 10px;
  overflow: hidden;
  margin-right: 30px;
}

.service_header {
  width: 100%;
  height: 150px;
  position: absolute;
  top: 0;
  left: 0;
}

.service_header > img {
  width: 100%;
  height: 100%;
}

.solid {
  border: 1px solid #2d8cf0 !important;
}

.dotted {
  border: 1px dashed #2d8cf0;
  cursor: pointer;
}

.service-box {
  padding: 30px 20px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}

.service-box-logo {
  height: 25px;
  margin-right: 5px;
}

.service-box-input {
  display: flex;
  align-items: center;
  padding: 0px 10px;
  background-color: rgb(255, 255, 255);
  border-radius: 100px;
  height: 28px;
}

.service-input {
  margin-left: 5px;
  background-color: #fff;
  border-radius: 100px;
  flex: 1;
  padding: 2px 10px;
  display: flex;
  align-items: center;
}

.navBox {
  width: 100%;
  margin-top: 40px;
  background-color: #fff;
  border-radius: 8px;
  text-align: center;
  padding: 10px 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 10px 0;
  z-index: 1;
  position: relative;
}

.navBox .item {
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: 12px;
  overflow: hidden;
}

.navBox .item > img {
  width: 23px;
  height: 23px;
  margin-bottom: 8px;
}

._line-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.centerNavBox {
  margin-top: 40px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.centerNavBox .title {
  padding: 10px 15px 5px;
  font-size: 13px;
  font-weight: 550;
}

.centerNavBox .list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.centerNavBox .list img {
  width: 100%;
}

.centerNavBox .list img:nth-child(1) {
  grid-row: 1/3;
}

.centerNavBox .list img:nth-child(4) {
  grid-column: 1/3;
}

.swiper-box {
  padding: 15px;
  margin-top: 10px;
  background-color: rgb(255, 255, 255);
  border-radius: 8px;
}

.swiper-box img {
  width: 100%;
}

.swiper-service-box {
  padding: 30px 20px;
  position: relative;
  z-index: 1;
}

.home-list-box {
  display: flex;
  flex-wrap: wrap;
  padding: 15px;
  position: relative;
  z-index: 1;
  gap: 5px 3px;
  background-color: #fff;
  border-radius: 8px;
  margin-top: 10px;
}

.home-list-box .item {
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: 14px;
}

.home-list-box .item .sub {
  font-size: 10px;
  padding: 0px 5px;
  border-radius: 100px;
  line-height: 1.2;
  text-align: center;
  color: rgb(255, 255, 255);
}

.bottomContent {
  padding: 0 18px;
  margin-top: 40px;
  position: relative;
  z-index: 1;
}

.bottomContent .list {
  padding: 10px 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 5px 0;
  background-color: #fff;
  border-radius: 8px;
}

.bottomContent .list .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  text-align: center;
  font-size: 12px;
}

.bottomContent .list .item img {
  width: 23px;
  height: 23px;
  margin-bottom: 8px;
  font-size: 12px;
}

.bottomContent .list .item .title {
  width: 100%;
}

.bottomContent .list .item .sub {
  width: 100%;
}

.bottomNavBox {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 10px 20px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bottomNavBox .item {
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: 14px;
}

.bottomNavBox .item img {
  width: 25px;
  height: 25px;
}

.rightDecBox {
  flex: 1;
  min-width: 510px;
  padding-right: 20px;
}

.rightDecBox .titleDecBox {
  font-size: 14px;
  font-weight: 550;
  position: relative;
  color: rgba(0, 0, 0, 0.85);
}

.rightDecBox .titleDecBox::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 14px;
  background-color: #1890ff;
  top: 50%;
  margin-top: -7px;
  left: -8px;
}

.rightDecBox .el-row {
  margin-top: 20px;
}
</style>
